<template>
  <div class="app-container home">
    <el-tabs v-model="activeName" @tab-click="handleClick" >

      <el-tab-pane label="工作台" name="first" v-hasPermi="['staging:console:staging']">
        <el-divider></el-divider>
        <IndexBack v-if="activeName==='first'" ref="indexBack"></IndexBack>
      </el-tab-pane>
      <el-tab-pane label="排班表" name="second" v-hasPermi="['staging:console:schedule']">
        <el-divider></el-divider>
        <PaiBan v-if="activeName==='second'" ref="paiBanPage"></PaiBan>
      </el-tab-pane>

      <el-tab-pane label="车辆库存" name="three" v-hasPermi="['staging:console:inventory']">
        <el-divider></el-divider>
        <stock  v-if="activeName==='three'"></stock>
      </el-tab-pane>
    </el-tabs>
    <div class="btnTip">今天是{{new_date}}，欢迎使用{{ title }}～</div>
    <div ref="carTip"></div>
  </div>
</template>
<script>
import Vue from 'vue'
import 'vue-easytable/libs/theme-default/index.css'
import { VeIcon, VeLoading, VePagination, VeTable } from 'vue-easytable'
import Label from '@/views/system/label/index'

import Stock from './carStockStatistics'
import Template from '@/views/contract/index'
import IndexBack from './indexBack.vue'
import PaiBan from './paiban.vue'
import ModelSchedule from './carmodelschedule'
import LevelSchedule from './carlevelschedule'

Vue.use(VeTable)
Vue.use(VePagination)
Vue.use(VeIcon)
Vue.use(VeLoading)

export default {
  name: 'index',
  components: { Template, Label, VePagination, Stock, IndexBack, PaiBan, ModelSchedule, LevelSchedule},
  data() {
    return {
      new_date: '',
      title: process.env.VUE_APP_TITLE,
      top: 0,
      activeName: 'first'

    }
  },
  mounted() {
    window.addEventListener('resize', (e)=> {
      this.$refs.paiBanPage?.calcHeight()
      this.$refs.levelPage?.calcHeight()
      this.$refs.modelPage?.calcHeight()
      this.$refs.indexBack?.zoom()
    }, false)
    this.clearable = false
    this.getNewDate()
  },
  methods: {
    getNewDate() {
      // 格式化日对象
      var date = new Date()
      var year = date.getFullYear() // 年
      var month = date.getMonth() + 1 // 月
      var day = date.getDate() // 日
      // 给一位数的数据前面加 “0”
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (day >= 0 && day <= 9) {
        day = '0' + day
      }
      this.new_date = year + '年' + month + '月' + day + '日'
    },
    handleClick(tab, event) {
      this.showSchedule = tab.name === 'first'
    },
  }
}
</script>

<style  scoped>
.home {
  position: relative;
}
.btnTip {
  position: absolute;
  top: 16px;
  right: 32px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  padding: 4px 16px;
  background: linear-gradient(270deg, #8dabf5 0%, #5473e8 100%);
  border-radius: 15px;
}
::v-deep .el-tabs__item {
  font-size: 16px;
  font-weight: 700;
}
::v-deep .el-pagination {
  text-align: center;
}

::v-deep .table-body-cell-class-blue {
  background: #3366ff !important;
}
::v-deep .table-body-cell-class-ash {
  background: #999999 !important;
}
::v-deep .table-body-cell-class-yellow {
  background: #ff9900 !important;
}
::v-deep .table-body-cell-class-white {
  background: white !important;
}
::v-deep .table-body-cell-class-brightYellow {
  background: #ffff33 !important;
}
::v-deep .table-body-cell-class-lightBlue {
  background: #66ccff !important;
}
::v-deep .table-body-cell-class-littlePurple {
  background: #ba55d3 !important;
}
::v-deep .table-body-cell-class-purple {
  background: #800080 !important;
}
::v-deep .tip-box {
  border: 1px solid #cfcfcf;
  border-radius: 3px;
  padding: 15px 22px;
  position: fixed;
  z-index: 99;
  min-width: 300px;
  max-width: 350px;

  min-height: 100px;
  max-height: 200px;
  background: #efefef;
  display: none;
  line-height: 1.5em;
}
::v-deep .el-input--mini .el-input__inner {
  border: 0;
  background-color: #fafafa;
}
::v-deep .el-tabs__item.is-active {
  font-size: 20px;
}
::v-deep .el-tabs__item {
  padding: 0px 16px;
}
::v-deep .el-tabs__nav {
  margin: 0 32px;
}
::v-deep .el-tabs__nav-wrap::after {
  content: initial;
}
::v-deep .el-tabs__header {
  margin: 0 0 8px;
}
::v-deep .el-divider {
  background-color: #dddddd;
}
::v-deep .el-divider--horizontal {
  margin: 0px 0px 16px;
}
::v-deep .el-button--info.is-plain {
  background: #fff;
}
</style>

